<template>
	<view class="wrap">
		<view class="body-wrap">
			<view class="empty" v-if="!list.length">
				<view style="margin-bottom: 50rpx;">
					<image mode="aspectFit" src="../../static/icon_supply_img.png"></image>
				</view>
				<view>当前暂无常跑路线</view>
			</view>
			<view v-else>
				<view class="item" @click="goEdit(item)" v-for="(item, index) in list" :key="index">
					<view class="item-line">
						<view class="circle start">起</view>
						<view>
							<text>{{item.cityStart1}}</text>
							<text v-if="item.cityStart2"><text>/</text>{{item.cityStart2}}</text>
							<text v-if="item.cityStart3"><text>/</text>{{item.cityStart3}}</text>
						</view>
					</view>
					<view class="item-line">
						<view class="circle end">终</view>
						<view>
							<text>{{item.cityEnd1}}</text>
							<text v-if="item.cityEnd2"><text>/</text>{{item.cityEnd2}}</text>
							<text v-if="item.cityEnd3"><text>/</text>{{item.cityEnd3}}</text>
						</view>
					</view>
					<view class="tips">路线{{index + 1}}</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btnBox">
				<view class="btn" @click="goAdd">+ 添加常跑路线</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
			}
		},
		onLoad() {
			this.getRouteList()
		},
		onShow() {
			this.getRouteList()
		},
		methods: {
			getRouteList() {
				this.wxRequest({
					url: `${this.API}/driverRoute/getDriverRouteList`,
					method: 'POST',
					header: {
						'authorization': uni.getStorageSync(this.DATA_KEY.token),
					},
					title: '加载中...',
					success: res => {
						console.log(res)
						this.list = res.data.data
					},
					fail: e => {
						console.log(e);
					}
				});
			},
			goAdd() {
				if (this.list.length < 10) {
					uni.navigateTo({
						url: './editRoute?type=0'
					})
				} else {
					uni.showToast({
						title: '最多只能添加10条线路哟',
						icon: 'none'
					});
				}

			},
			goEdit(item) {
				let data = JSON.stringify(item)
				uni.navigateTo({
					url: `./editRoute?type=1&data=${data}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.body-wrap {
		width: 100%;
		height: 100%;
		overflow: auto;
		box-sizing: border-box;
		.item {
			padding: 32rpx;
			background: #fff;
			margin-top: 24rpx;
			position: relative;

			.item-line {
				display: flex;
				align-items: center;
				font-size: 34rpx;
				color: #333;
				font-weight: bold;

				&:first-child {
					margin-bottom: 32rpx;
				}

				.circle {
					font-size: 28rpx;
					font-weight: 400;
					border-radius: 50%;
					padding: 4rpx 12rpx;
					margin-right: 12rpx;
					color: #fff;

					&.start {
						background: #00d967;
					}

					&.end {
						background: #da7200;
					}
				}
			}

			.tips {
				position: absolute;
				top: 24rpx;
				right: 24rpx;
				font-size: 28rpx;
				color: #666;
			}
		}
	}

	.empty {
		margin-top: 100rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-self: center;
		color: #999;
	}

	.wrap {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		min-height: 100vh;
		box-sizing: border-box;
		padding: 0 0 calc(100rpx + env(safe-area-inset-bottom));
	}

	.footer {
		position: absolute;
		bottom: calc(10rpx + env(safe-area-inset-bottom));
		width: calc(100%);
		box-sizing: border-box;
		padding: 0 32rpx;

		.btnBox {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.btn {
			color: #FFFFFF;
			background: #4089ff;
			width: 100%;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 80rpx;
			text-align: center;
			box-shadow: 0 0 20rpx 12rpx rgba(0, 62, 129, 0.04);
		}
	}
</style>
